<template>
	<view class="news-details">
		<view v-for="news in newsList" :key="news.id">
			<view v-if="news.id == newsId">
				<view class="news-img">
					<image :src="news.img"></image>
				</view>
				<view class="news-title">{{news.title}}</view>
				<view class="news-info">
					<text>{{news.date}}</text>
					<text style="margin-left: 1rem;">{{news.read}}阅读</text><br />
					<text>{{news.author}}</text>
				</view>
				<view class="news-content" v-html="news.content">
				</view>
				<view class="news-footer">
					<text>本内容由用户上传，不代表快头条观点</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import newsList from '@/data/news.js';

	export default {
		onLoad: function(option) {
			this.newsId = option.id;
		},
		data() {
			return {
				newsList: newsList,
				newsId: null
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.news-details {
		.news-img {
			height: 10rem;
			overflow: hidden;
		
			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			
		}
		
		.news-title {
			margin-top: 0.2rem;
			padding: 0.5rem 1rem 0.2rem 1rem;
			font-size: 1.5rem;
			font-weight: bold;
		}
		
		.news-info {
			padding: 0.2rem 1rem 0.2rem 1rem;
			font-size: 0.8rem;
		}
		
		.news-content {
			padding: 0.2rem 1rem 0.5rem 1rem;
			text-indent: 2rem;
			line-height: 1.5rem;
			letter-spacing: 0.2rem;
		}
		
		p {
			margin-top: 1rem;
		}

		.news-footer {
			color: #9c9c9c;
			font-size: 0.8rem;
			text-align: center;
		}
	}
</style>
